import 'package:flutter/material.dart';

final Color backgroundColor = Color(0xFF4A4A58);

class MenuDashBoardPage extends StatefulWidget {
  @override
  _MenuDashBoardPageState createState() => _MenuDashBoardPageState();
}

class _MenuDashBoardPageState extends State<MenuDashBoardPage>
    with SingleTickerProviderStateMixin {
  bool isCollapsed = false;
  double screenWidth, screenHeight;
  Duration duration = const Duration(milliseconds: 200);

  AnimationController _controller;
  Animation<double> _scaleAnimation;
  Animation<Offset> _slideAnimation;
  Animation<double> _fadeAnimation;
  Animation<double> _scaleMenuAnimation;

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  void initState() {
    _controller = AnimationController(vsync: this, duration: duration);
    _scaleAnimation = Tween<double>(begin: 1, end: 0.8).animate(_controller);
    _slideAnimation = Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0))
        .animate(_controller);
    _fadeAnimation = Tween<double>(begin: 0, end: 1).animate(_controller);
    _scaleMenuAnimation = Tween<double>(begin: 0, end: 1).animate(_controller);

    _controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    screenHeight = size.height;
    screenWidth = size.width;
    return SafeArea(
      child: Scaffold(
        backgroundColor: backgroundColor,
        body: Stack(
          children: <Widget>[menu(context), dashboard(context)],
        ),
      ),
    );
  }

  Widget menu(BuildContext context) {
    return SlideTransition(
      position: _slideAnimation,
      child: ScaleTransition(
        scale: _scaleMenuAnimation,
        child: FadeTransition(
          opacity: _fadeAnimation,
          child: Align(
            //指定在Stack中的位置，否则会覆盖到整个屏幕
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.only(left: 16.0),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  InkWell(
                    child: Text(
                      "Dashboard",
                      style: TextStyle(color: Colors.white, fontSize: 22),
                    ),
                    onTap: () {
                      setState(() {
                        if (isCollapsed) {
                          _controller.forward();
                        } else {
                          _controller.reverse();
                        }
                        isCollapsed = true;
                      });
                    },
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "Messages",
                    style: TextStyle(color: Colors.white, fontSize: 22),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "Utility Bills",
                    style: TextStyle(color: Colors.white, fontSize: 22),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "Branches",
                    style: TextStyle(color: Colors.white, fontSize: 22),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget dashboard(BuildContext context) {
    return AnimatedPositioned(
      duration: duration,
      top: 0, // isCollapsed ? 0 : 0.2 * screenHeight,
      bottom: 0, //isCollapsed ? 0 : 0.2 * screenWidth,
      left: 0, //isCollapsed ? 0 : 0.0 * screenWidth,
      right: isCollapsed ? 0 : -0.9 * screenWidth,
      child: ScaleTransition(
        alignment: Alignment.centerRight,
        scale: _scaleAnimation,
        child: Material(
          // animationDuration: Duration(microseconds: 2000),
          borderRadius: isCollapsed ? null : BorderRadius.circular(20),
          elevation: 8,
          color: backgroundColor,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            physics: ClampingScrollPhysics(),
            child: Container(
              width: screenWidth,
              padding: const EdgeInsets.all(10),
              child: Column(
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      InkWell(
                        child: Icon(
                          Icons.menu,
                          color: Colors.white,
                        ),
                        onTap: () {
                          setState(() {
                            if (isCollapsed) {
                              _controller.forward();
                            } else {
                              _controller.reverse();
                            }
                            isCollapsed = !isCollapsed;
                          });
                        },
                      ),
                      Text(
                        "My Cards",
                        style: TextStyle(fontSize: 24, color: Colors.black),
                      ),
                      Icon(
                        Icons.settings,
                        color: Colors.white,
                      )
                    ],
                  ),
                  SizedBox(
                    height: 40,
                  ),
                  Container(
                    height: 156,
                    child: PageView(
                      scrollDirection: Axis.horizontal,
                      pageSnapping: true,
                      controller: PageController(viewportFraction: 0.8),
                      children: <Widget>[
                        Container(
                          margin: const EdgeInsets.symmetric(horizontal: 8),
                          width: 100,
                          height: 100,
                          color: Colors.redAccent,
                        ),
                        Container(
                          margin: const EdgeInsets.symmetric(horizontal: 8),
                          width: 100,
                          height: 100,
                          color: Colors.white,
                        ),
                        Container(
                          margin: const EdgeInsets.symmetric(horizontal: 8),
                          width: 100,
                          height: 100,
                          color: Colors.green,
                        ),
                        Container(
                          margin: const EdgeInsets.symmetric(horizontal: 8),
                          width: 100,
                          height: 100,
                          color: Colors.blue,
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Text('Transactions'),
                  SizedBox(
                    height: 5,
                  ),
                  ListView.separated(
                    shrinkWrap: true,
                    itemCount: 20,
                    separatorBuilder: (BuildContext context, int index) {
                      return Divider(
                        height: 16,
                      );
                    },
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        title: Text("Macbook"),
                        subtitle: Text("Apple"),
                        trailing: Text("-2900"),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
